<template>
  <view>
    <my-search @click="toSearch"></my-search>
 
    <view class="classify">
      <scroll-view class="left" scroll-y :style="{ height: windowHeight + 'px' }">
        <view @click="handleChangeTabIndex(index)" :class="index === tabIndex ? 'left-title active': 'left-title'"
          v-for="(item, index) in tabData" :key="index">{{ item.cat_name }}</view>
      </scroll-view>
      <scroll-view :scroll-top="scrollTop" @scroll="scroll" class="right" scroll-y
        :style="{ height: windowHeight + 'px' }">
        <view class="right-list-item" v-for="(item, index) in tabDataLevel2" :key="index">
          <view class="right-title">
            / {{ item.cat_name }} /
          </view>
          <view class="right-lv3-container">
            <view class="lv3-item" v-for="(item, index) in item.children" :key="index"
              @click="toGoodsList(item.cat_name)">
              <image src="/static/c1.png" mode="widthFix"></image>
              <text>{{ item.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {

    data() {
      return {
        // 可用高度
        windowHeight: 0,
        // 高亮下标
        tabIndex: 0,
        // tab 数据
        tabData: [],
        // 二级数据
        tabDataLevel2: [],
        // 滚动相关参数
        scrollTop: 0,
        old: {
          scrollTop: 0
        }
      };
    },
    methods: {
      toSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      },
      scroll(e) {
        this.old.scrollTop = e.detail.scrollTop
      },
      goTop: function(e) {
        this.scrollTop = this.old.scrollTop
        this.$nextTick(function() {
          this.scrollTop = 0
        });
      },
      toGoodsList(name) {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?query=' + name
        })
      },
      handleChangeTabIndex(index) {
        // 修改下标
        this.tabIndex = index
        // 修改二级数据
        this.tabDataLevel2 = this.tabData[this.tabIndex].children
        // 返回顶部
        this.goTop()
      },
      // 初始化高度
      initSet() {
        const option = uni.getWindowInfo()
        this.windowHeight = option.windowHeight - 60;
      },
      // 请求数据
      getTabData() {
        uni.request({
          url: 'https://www.uinav.com/api/public/v1/categories',
          method: 'GET',
          success: ({
            data
          }) => {
            const {
              message
            } = data;
            // 保存 tab 数据
            this.tabData = message
            // 保存二级数据
            this.tabDataLevel2 = this.tabData[this.tabIndex].children
          }
        })
      }
    },
    onLoad() {
      this.initSet();
      this.getTabData()
    }
  }
</script>

<style lang="scss">
  .classify {
    display: flex;

    .left {
      width: 200rpx;
      background-color: #f7f7f7;
      border-right: 1rpx solid #ccc;

      .left-title {
        line-height: 60rpx;
        height: 60rpx;
        text-align: center;
        border-left: 4rpx solid #fff;
        font-size: 24rpx;
        margin: 30rpx 10rpx;

        &.active {
          border-left: 4rpx solid red;
        }
      }
    }

    .right {
      flex: 1;

      .right-list-item {
        .right-title {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 60rpx;
          font-weight: bold;
        }

        .right-lv3-container {
          display: flex;
          flex-wrap: wrap;

          .lv3-item {
            width: 33.3%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10rpx;
            box-sizing: border-box;

            image {
              width: 100%;
            }

            text {}
          }
        }
      }
    }
  }
</style>
